<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.ok{
				color: green;
			}
			.error{
				color: red;
			}
		</style>
		<script type="text/javascript">
			function checkName() {
				var name = document.getElementById("nameId").value;
				var nameSpan = document.getElementById("nameMsgId");
				var reg = /^\w{5,10}$/;
				if (reg.test(name)) {
					nameSpan.className = "ok";					
				} else {
					// 验证不合法，将.error样式
					nameSpan.className = "error";
				}
			}
			
			function checkEmail() {
				var email = document.getElementById("emailId").value;
				var emailSpan = document.getElementById("emailMsgId");
				// ghddf@dfd.com.cn
				var reg = /\w+@\w+(\.\w+)+/;
				if (reg.test(email)) {
					emailSpan.className = "ok";					
				} else {
					// 验证不合法，将.error样式
					emailSpan.className = "error";
				}
			}
		</script>
	</head>
	<body>
		名字：<input type="text"  id="nameId" onblur="checkName()" />
		<span id="nameMsgId">5-10位的字母、数字、下划线</span>
		<br />
		名字：<input type="text"  id="emailId" onblur="checkEmail()" />
		<span id="emailMsgId">必须符合邮箱的格式</span>
	</body>
</html>
